<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器及优先级</title>
    <link rel="stylesheet" type="text/css" href="css/CSS选择器及优先级.css">
</head>
<body>
<h2>交集选择器</h2>
<pre>
    div.box {}  选择div并且class为box的元素
</pre>
<div class="box"></div>
<h2>并集选择器</h2>
<pre>
    h4,.list {} 选择h4以及class为list的元素
</pre>
<h4>并集</h4>
<p class="list">选择器</p>
<h2>后代选择器(包含选择器)(用空格隔开)</h2>
<pre>
    .box1 p a {}    选择class为box1后代为p且p下面包含a的元素
</pre>
<div class="box1">
    <div>
        <a href="">测试</a>
        <p>
            <a href="">后代选择器</a>
        </p>
    </div>
</div>
<h2>子元素选择器(>)</h2>
<pre>
    .box2>p>a {}    选择class为box2孩子为p且p孩子为a的元素，注意同后代选择器的区分。
</pre>
<div class="box2">
    <div>
        <p>
            <a href="">子元素选择器</a>
        </p>
    </div>
    <p>
        <a href="">子元素选择器</a>
    </p>
</div>
<h2>属性选择器</h2>
<pre>
    E[attr][alt]...     用于选取带有指定属性的元素，可以是多个属性
    E[attr = value]     用于选取带有指定属性值的元素
    E[attr ~= value]    用于选取带有指定属性值的元素
    E[attr |= value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
    E[attr ^= value]    匹配属性值以指定值开头的每个元素
    E[attr $= value]    匹配属性值以指定值结尾的每个元素
    E[attr *= value]    匹配属性值中包含指定值的每个元素
</pre>
<img src="../base/img/hetao.jpg" alt="核桃">
<a href="#">#</a>
<a href="#1">#1</a>
<h2>结构伪类选择器</h2>
<h3>1.伪类选择器</h3>
<pre>
    和类选择器的区别在于类选择器可以随意命名，而伪类选择器是CSS中已定义好的选择器，不能随意起名。

    最常见伪类选择器(要按照如下顺序，顺序错乱可能导致出不来效果)
    a:link {}    未被访问的链接
    a:visited {} 已被访问的链接
    a:hover {}   鼠标指针移动到链接上
    a:active {}  正在被点击的链接
</pre>
<a title="" href="">伪类选择器</a>
<h3>2.伪元素选择器</h3>
<pre>
    在CSS中，主要有4个伪元素选择器
    first-line      用于向某个元素中的第一行文字使用样式
    first-letter    用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式
    before          用于在某个元素之前插入内容
    after           用于某个元素之后插入内容
</pre>
<p class="wei">30日从医院了解到，华宁喜欢音乐，会拉大提琴，20岁时被确诊为肥厚性心肌病。8个月前，她被医生告知，心脏功能已到终末期，唯一的治疗办法是移植。8个月来，她的生活几乎不能自理，稍一活动就胸闷、气急，大多数时间躺在家里，几乎没出过门。5月8日，因病情恶化被送进医院ICU。</p>
<h3>3.结构性伪类选择器</h3>
<pre>
    root选择器     将样式绑定到页面的根元素中，在HTML中，根元素始终是HTML元素。
    not选择器      选择匹配非指定元素/选择器的每个元素
    empty选择器    匹配没有子元素(包含文本节点)的每个元素
    target选择器   URL带有后面根由锚名称#，指向文档内某个具体的元素，这个别链接的元素就是目标元素。target用于选取当前活动的目标元素。
</pre>
<p></p>
<p><a href="#new1">跳转至内容1</a></p>
<p><a href="#new2">跳转至内容2</a></p>
<p id="new1"><b>内容1...</b></p>
<p id="new2"><b>内容2...</b></p>
<h3>4.选择器</h3>
<pre>
    first-child         第一个子元素
    last-child          最后一个子元素
    nth-child(n)        顺序第n个子元素
    nth-child(odd)      顺序奇数子元素
    nth-child(even)     顺序偶数子元素
    nth-last-child(n)   逆序第n个子元素
    nth-last-child(odd) 逆序奇数子元素
    nth-last-child(even)逆序偶数子元素
    only-child          唯一的子元素
    first-of-type       顺序第一个同类型的
    last-of-type        逆序第一个同类型的
    nth-of-type         参考nth-child
    nth-last-of-type    参考nth-last-of-type
    only-of-type        父元素只包含一个类型子元素

    <b>
        注意：first-child与first-of-type区别
        first-child匹配的是父元素的第一个元素，指结构上的第一个元素
        first-of-type匹配的是该类型的第一个元素，不一定第一个元素
        <a style="color: #FF0000;font-size: larger" href="http://www.cnblogs.com/xuan52rock/p/4416228.html" target="_blank">详情</a>
        关于a标签跳转的几种方式
        _blank      新窗口打开
        _self       自身打开，默认值
        _parent     父窗口
        _top        顶层窗口
        自定义      也可以跳转到已定义窗口
    </b>
</pre>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<ul>
    <li>唯一</li>
</ul>
<div>
    <p>p</p>
    <h1>h1</h1>
</div>
<h2>UI状态伪类选择器(只有当元素处于某种状态下时才起作用，默认状态下不起作用)</h2>
<pre>

</pre>

</body>
</html>